<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../../css/api.css">
    <style>
        body{ height: auto; }
        ul { font-size: 16px; border: 1px solid #ddd; line-height: 44px; border-width: 1px 0; padding: 0 15px; margin-top: 30px; background-color: white; }
        ul li.ic-select{ background-position: right center; background-size: 18px auto; }
        ul li+ li{ border-top: 1px solid #ddd;}
    </style>
</head>
<body>
    <ul>
        <li tapmode="opacity" onclick="fnCheckbox( this );" id ="gos_custom" >自定义</li>
        <li tapmode="opacity" onclick="fnCheckbox( this );" id="gos_yellow" >黄色</li>
        <li tapmode="opacity" onclick="fnCheckbox( this );" id ="gos_perpose" >紫色</li>
        <li tapmode="opacity" onclick="fnCheckbox( this );" id ="gos_pink" >粉色</li>
    </ul>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/base.js"></script>
<script type="text/javascript">

    apiready = function(){

        switch(api.pageParam.pageParam.LED_Color)
        {
            case 0:
               $api.addCls( $api.dom( 'ul li[id = "gos_custom"]' ),'ic-select' );
               break;
            case 1:
               $api.addCls( $api.dom( 'ul li[id = "gos_yellow"]' ),'ic-select' );
               break;
            case 2:
               $api.addCls( $api.dom( 'ul li[id = "gos_perpose"]' ),'ic-select' );
               break;
            case 3:
               $api.addCls( $api.dom( 'ul li[id = "gos_pink"]' ),'ic-select' );
               break;
        }
    }
    
    function fnCheckbox( el ){

            $api.removeCls( $api.dom( 'ul li[id = "gos_custom"]' ),'ic-select' );
            $api.removeCls( $api.dom( 'ul li[id = "gos_yellow"]' ),'ic-select' );
            $api.removeCls( $api.dom( 'ul li[id = "gos_perpose"]' ),'ic-select' );
            $api.removeCls( $api.dom( 'ul li[id = "gos_pink"]' ),'ic-select' );
            $api.addCls(el, 'ic-select');

            var newValue;
            if (el.id == "gos_custom") {
                newValue = 0;
            }
            else if(el.id == "gos_yellow"){
                newValue = 1;
            }
            else if(el.id == "gos_perpose"){
                newValue = 2;
            }
            else
            {
                newValue = 3;
            }
            var data = {"LED_Color": newValue};
            console.log("下发控制指令： dataValue = " + JSON.stringify(data));

            var gizWifiDevice = api.require('gizWifiDevice');
            gizWifiDevice.write({
                device: {
                    mac: api.pageParam.pageParam.mac,
                    did: api.pageParam.pageParam.did
                },
                sn: 0,
                data: data
             }, function(ret, err){
                console.log('下发控制指令回调 ret = ' + JSON.stringify(ret) + ', err = ' + JSON.stringify(err));
            });

            api.sendEvent({
                 name: 'sendLED_ColorControl',
                 extra: {
                 LED_Color: newValue,
            }
            });

            api.closeWin();
    }
    


    
</script>
</html>